import React, { useState, useEffect } from 'react';
import API from '@/api';
import { Card, Spin } from 'antd';
import tool1 from '@/assets/images/tool1.png';
import tool2 from '@/assets/images/tool2.png';
import tool3 from '@/assets/images/tool3.png';
import tool4 from '@/assets/images/tool4.png';
import tool5 from '@/assets/images/tool5.png';
import more from '@/assets/images/more.png';
const ToolBox = () => {
  const [list, setList] = useState([]);
  const icons = [tool1, tool2, tool3, tool4, tool5];
  const initList = () => {
    API.getEmergencyToolsList().then((res) => {
      if (res?.t) {
        setList(res.t);
      }
    });
  };
  useEffect(() => {
    initList();
  }, []);
  const downFn = (item) => {
    item.loading = true;
    setList([...list]);
    const { originalFileName, fileName } = item;
    API.downloadFn('/common/download', { originalFileName, fileName }).then(
      (res) => {
        item.loading = false;
        setList([...list]);
      },
    );
  };
  return (
    <Card className="main-x bgf card-x">
      {list.map((x, i) => (
        <Card.Grid
          className="card-item"
          key={x.id}
          onClick={downFn.bind(null, x)}
        >
          <Spin tip="下载中..." spinning={x.loading || false}>
            <div>
              <img src={icons[i] || icons[4]} alt="icon" />
              <div>
                {x.originalFileName?.substring(
                  0,
                  x.originalFileName.lastIndexOf('.'),
                )}
              </div>
            </div>
          </Spin>
        </Card.Grid>
      ))}
      <Card.Grid className="card-item more-x" hoverable={false}>
        <img src={more} alt="icon" />
        <div className="more">更多功能，敬请期待</div>
      </Card.Grid>
    </Card>
  );
};

export default ToolBox;
